<template>
    <div class="main">
        <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm" size="default"
            status-icon :rules="rules">
            <el-form-item label="类型" prop="type">
                <el-radio-group v-model="ruleForm.type" @change="changeType" :disabled="!props.isAdd">
                    <el-radio label="景区" value="0" />
                    <el-radio label="住宿" value="1" />
                    <el-radio label="特产" value="2" />
                </el-radio-group>
            </el-form-item>
            <el-form-item label="关联" prop="listDetailsId">
                <el-select v-model="ruleForm.listDetailsId" class="m-2" placeholder="请选择" :disabled="!props.isAdd">
                    <el-option v-for="item in options" :key="item.value" :label="item.title"
                        :value="item.listdetailsid" />
                </el-select>
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model="ruleForm.sort" placeholder="请输入" type="number" />
            </el-form-item>
            <el-form-item label="推荐理由">
                <el-input v-model="ruleForm.reason" type="textarea" placeholder="请输入" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    确认
                </el-button>
                <el-button @click="closeAdd()">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { recommendedListUpdate, recommendedListAdd, recommendedListRelevancySelect } from '@/api/theCharts.js'
import { ElMessage } from 'element-plus'
import { useRoute } from 'vue-router';
const route = useRoute();
const emit = defineEmits(['closeAdd', 'closeOK'])
const props = defineProps({
    isAdd: {
        type: Boolean,
        default: true, // 默认值为 true
    },
    row: {
        type: Object,
        default: () => ({}), // 默认值为一个空对象
    },
})
onMounted(() => {
    if (!props.isAdd) {
        ruleForm.sort = props.row.sort; // 初始化表单字段值
        ruleForm.reason = props.row.reason; // 初始化表单字段值
        ruleForm.listDetailsId = props.row.listDetailsId; // 初始化表单字段值
        ruleForm.type = props.row.type; // 初始化表单字段值
    }
    getList()
})

const ruleFormRef = ref()
const ruleForm = reactive({
    sort: '',
    reason: '',
    listDetailsId: '',
    type: '0'
})
const rules = reactive({
    sort: [
        { required: true, message: '请输入', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
    listDetailsId: [
        { required: true, message: '请选择', trigger: 'change' },
    ],
})
// 下拉列表数据
const options = ref([])
const getList = async () => {
    const res = await recommendedListRelevancySelect({ type: ruleForm.type })
    if (res.code == 200) {
        options.value = res.data
    }
}
// 单选框选择
const changeType = (val) => {
    ruleForm.listDetailsId = ''
    getList()
}

// 表格确认
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.isAdd) {
                console.log(ruleForm);

                recommendedListAdd(ruleForm).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '添加成功',
                        })
                        emit('closeOK')
                    }
                })

            } else {
                recommendedListUpdate({ ...ruleForm, id: props.row.id }).then(res => {
                    if (res.code == 200) {
                        ElMessage({
                            type: 'success',
                            message: '修改成功',
                        })
                        emit('closeOK')
                    }
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
}

// 关闭
const closeAdd = () => {
    emit('closeAdd')
}
</script>

<style lang="scss" scoped>
.is-closable {
    margin-right: 5px;
}

.demo-ruleForm {

    .el-input,
    .el-select {
        width: 300px;
    }

    .el-textarea {
        width: 400px;
    }
}
</style>